<template>
	<view :class="themeName">
		<view style="overflow: scroll;height:79vh;">
			<image style="width: 100%; background-color: #fff" :src="msg.shop.image" mode=""></image>
			<view class="boxes">
				<view class="back bold md">门店：{{ msg.shop.name?msg.shop.name:'' }}
				<text class="m-l-12" :class="{ 'color1': msg.line==1,'muted':msg.line==0 }">{{msg.line==1?'Wi-Fi':''}}</text></view>
				<view class="back md m-t-30">地址：{{ msg.shop.address?msg.shop.address:'' }}</view>
				<view class="flex m-t-30">
					<text class="md">选择：</text>
					<text style="flex: 1" class="md black">
						<text v-if="!timenum">请点击下方选择时间</text>
						<text v-else>{{ timenum }}分钟</text>
					</text>
				<!-- 	<text style="flex: 1" class="md black" @click="showchoose = true">
						<text v-if="!timenum">请点击下方选择时间</text>
						<text v-else>{{ timenum }}分钟</text>
					</text>
					<u-picker v-model="showchoose" :confirm-color="themeColor" cancel-color="#999" mode="selector" :range="chooseList" @confirm="change"></u-picker> -->
				</view>
				
				<view class="back contbox">
					<view @click="getchange(index)" class="b1 md" v-for="(item,index) in chooseList" :key="index">{{item}}</view>
				</view>
			
				<view class="flex m-t-20 row-between">
					<view class="flex">
						<view class="m-r-20">可用积分({{ integral?integral:'' }})</view>
						<view v-if="payintegral">本次抵扣({{ payintegral }})</view>
					</view>
					<view>
						<radio-group>
							<label>
								<radio style="transform: scale(0.7)" @click="radioClick(1)" :checked="checked" />
							</label>
						</radio-group>
					</view>
				</view>
			</view>
		</view>
		<view class="base">
			<view @click="submit" style="margin-top: 20rpx" class="other-button" hover-class="other-button-hover">立即支付</view>
			<view  class="jiage">
				单价(分钟)：
				<text class="m-r-20">￥{{ price?price:'' }}</text>
				支付金额：
				<text v-if="timenum" class="m-r-20">￥{{ money }}</text>
			</view>
		</view>
	</view>
</template>

<script>
import { strToParams } from '@/utils/tools';
import utils from '@/utils/index.js';
import { jqrInfo, jqrOrder } from '@/api/others.js';
import { nextTick } from 'process';
export default {
	data() {
		return {
			loading:true,
			id: '',
			msg: {
				shop: {}
			},
			price: 0, //单价
			showchoose: false,
			chooseList: [],
			timenum: '', //服务时间
			integral: 0, //当前积分
			payintegral:0,//使用积分
			jfdh: 0, //单积分可兑换
			dhmoney: 0, //可兑换金额
			checked: false,
			money: 0 //支付金额
		};
	},
	onLoad() {
		const options = this.$Route.query;
		console.log(options)
		// #ifndef MP-ALIPAY
		// 扫普通二维码
		if (options.q) {
			let q = decodeURIComponent(options.q);
			let id = this.getquery(q, 'id');
			uni.setStorageSync('jqrid',id)
			console.log(id,'=======>机器人id2')
		}
		if (options.scene && !options.q) {
			// 扫小程序码
			var scene = decodeURIComponent(options.scene);
			let id = this.getUrlParam(scene).id;
			uni.setStorageSync('jqrid',id)
			console.log(id,'=======>机器人id1')
		}
		if (options.id) {
			let id = options.id;
			uni.setStorageSync('jqrid',id)
			console.log(id,'=======>机器人id3')
		}
		// #endif
	},
	onShow() {
		this.$nextTick(() => {
			if(this.$store.getters.token){
				this.id = uni.getStorageSync('jqrid');
				this.getinfo();
			}else{
				uni.navigateTo({
					url:'/pages/login/login'
				})
			}
		});
	},
	methods: {
		// 获取小程序二维码链接，获取后面的参数
		getUrlParam(scene) {
			var obj = {};
			for (var i = 0; i < scene.split('*').length; i++) {
				var arr = scene.split('*')[i].split('/');
				obj[arr[0]] = arr[1];
			}
			return obj;
		},
		// 扫码普通二维码链接
		getquery(url, name) {
			var reg = new RegExp('(^|&|/?)' + name + '=([^&|/?]*)(&|/?|$)', 'i');
			var r = url.substr(1).match(reg);
			if (r != null) {
				return r[2];
			}
			return null;
		},
		radioClick() {
			this.checked = !this.checked;
			this.getmoney();
		},
		getinfo() {
			this.loading = false;
			jqrInfo({ id: this.id }).then((res) => {
				this.msg = res;
				this.chooseList = res.time;
				this.integral = res.user_integral;
				this.jfdh = Number(res.jfdh);
				this.dhmoney = Number(res.user_integral) * Number(res.jfdh);
				this.price = res.shop.price; //单价
				
				// if(this.msg.is_open==0){
				// 	uni.showModal({
				// 		content: '该设备状态禁止下单，请联系店长！',
				// 		showCancel: false,
				// 		confirmText: '我知道了',
				// 		success: function (res) {
				// 			if (res.confirm) {
								
				// 			}
				// 		}
				// 	});
				// }
			});
		},
		getchange(index) {
			this.timenum = this.chooseList[index];
			this.getmoney();
		},
		getmoney() {
			if (this.checked) {
				let paynum = Number(this.timenum) * Number(this.price);
				if(this.dhmoney>paynum){
					this.payintegral = Math.floor(paynum / this.jfdh);//抵扣积分
					this.money = (paynum - this.payintegral * this.jfdh).toFixed(2)
					// console.log(this.payintegral)
					// console.log(this.money)
				}else{
					this.money = (paynum - this.dhmoney).toFixed(2);
					this.payintegral = this.integral;
				}
			} else {
				this.money = (Number(this.timenum) * Number(this.price)).toFixed(2);
				this.payintegral = 0;
			}
		},
		submit() {
			let that = this;
			// if(this.msg.is_open==0){
			// 	uni.showModal({
			// 		content: '该设备状态禁止下单，请联系店长！',
			// 		showCancel: false,
			// 		confirmText: '我知道了',
			// 		success: function (res) {
			// 			if (res.confirm) {
							
			// 			}
			// 		}
			// 	});
			// 	return
			// }
			if (!this.timenum) {
				uni.showToast({
					title: '请选择服务时间',
					icon: 'none'
				});
				return;
			}
			let is_jifen = 0;
			if (this.checked) {
				is_jifen = 1;
			}
			let params = {
				pay_way:'2',
				jqr_id: this.id,
				time: this.timenum,
				is_jifen: is_jifen,
				jifen: this.payintegral,
				price: this.money
			};
			uni.showLoading();
			jqrOrder(params).then((ret) => {
				uni.hideLoading();
				// this.UUID = '003CS00g0M0K1+R01';
				// this.deviceId = 84709;
				// this.chargeId = 18108810;
				// this.minute = 80;
				if(ret.config){
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: ret.config.timeStamp, // 时间戳（单位：秒）
						nonceStr: ret.config.nonceStr, // 随机字符串
						package: ret.config.package, // 固定值
						signType: ret.config.signType, // 签名算法，这里用的 MD5/RSA 签名
						paySign: ret.config.paySign, //签名
						success(res) {
							uni.showToast({
								title: '支付成功',
								duration: 2000
							});
							setTimeout(function () {
								uni.setStorageSync('jqrdevicename', ret.sn);
								
								if(that.msg.line==1 && that.msg.wifisn){
									uni.reLaunch({
										url:'/others/pages/control/control_wxw?id='+ret.order_id+'&type=1'+'&time='+that.timenum
									})
								}else{
									uni.reLaunch({
										url:'/others/pages/control/control?id='+ret.order_id+'&type=1'+'&time='+that.timenum
									})
								}
								
								// uni.reLaunch({
								// 	url:
								// 		'/others/pages/getopen/getopen?id=' +
								// 		ret.order_id +
								// 		'&UUID=' +
								// 		ret.uuid +
								// 		'&deviceId=' +
								// 		ret.deviceid +
								// 		'&chargeId=' +
								// 		ret.charge_id +
								// 		'&minute=' +
								// 		that.timenum
								// });
							}, 1500);
						},
						fail(e) {
							uni.showToast({
								title: '支付失败',
								icon: 'none'
							});
							setTimeout(function () {
								uni.reLaunch({
									url: '/others/pages/order_list/order_list?mode=pay'
								});
							}, 1500);
						}
					});
				}else{
					uni.showToast({
						title: '支付成功',
						duration: 2000
					});
					setTimeout(function () {
						uni.setStorageSync('jqrdevicename', ret.sn);
						
						if(that.msg.line==1 && that.msg.wifisn){
							uni.reLaunch({
								url:'/others/pages/control/control_wxw?id='+ret.order_id+'&type=1'+'&time='+that.timenum
							})
						}else{
							uni.reLaunch({
								url:'/others/pages/control/control?id='+ret.order_id+'&type=1'+'&time='+that.timenum
							})	
						}
						
						// uni.reLaunch({
						// 	url:
						// 		'/others/pages/getopen/getopen?id=' +
						// 		ret.order_id +
						// 		'&UUID=' +
						// 		ret.uuid +
						// 		'&deviceId=' +
						// 		ret.deviceid +
						// 		'&chargeId=' +
						// 		ret.charge_id +
						// 		'&minute=' +
						// 		that.timenum
						// });
					}, 1500);
				}
				
			});
		}
	}
};
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
		padding: 0;
	}
.boxes {
	background-color: #fff;
	margin: 20rpx;
	padding: 20rpx;
	border-radius: 10rpx;
	.color1{
		color: #477EE3;
	}
	.contbox{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		
		.b1{
			width: 31%;
			margin: 20rpx 1%;
			text-align: center;
			background: #4280ed;
			color: #fff;
			padding: 15rpx 0;
			border-radius: 10rpx;
			
			&:nth-child(1) {
				background: #0190ff;
			}
			&:nth-child(2) {
				background: #10b9c4;
			}
			&:nth-child(3) {
				background: #ff01cc;
			}
			&:nth-child(4) {
				background: #01c6f0;
			}
			&:nth-child(5) {
				background: #01ffe4;
			}
			&:nth-child(6) {
				background: #ffa801;
			}
			&:nth-child(7) {
				background: #01f0ff;
			}
			&:nth-child(8) {
				background: #c001ff;
			}
			&:nth-child(9) {
				background: #01ffa2;
			}
		}
	}
	
}
.base {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #fff;
	padding: 20rpx 0;
	box-sizing: border-box;
	height: 20vh;

	.jiage {
		margin: 20rpx 35rpx;
		text {
			color: #4280ed;
		}
	}
}
</style>
